<template>
    <div class="leftContentThree">
        <!--第二部分-->
        <div class="assessDetail">
            <div class="bestCityTitle">
                <!--宽窄竖线-->
                <div class="doubleLine lf">
                    <div class="wide lf"></div>
                    <div class="narrow lf"></div>
                </div>
                <!--最优城市-->
                <div class="bestCityP lf">
                    <div class="bestCityName lf">各城市站点评价统计</div>
                </div>
            </div>
            <div class="threeLine">
                <div class="firstLine lf"></div>
                <div class="secondLine lf"></div>
                <div class="thirdLine lf"></div>
            </div>
            <div class="bestCharts">
                <div id="bestCharts"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    let echarts = require('echarts');
    export default {
        name: 'LeftContentThree',
        props:{
            CityStationQXDJCounts:Array
        },
        data(){
            return{
                chartsCity:[],
                chartsList1:[],
                chartsList2:[],
                chartsList3:[],
                chartsList4:[],
                chartsList5:[]
            }
        },
        watch:{
            CityStationQXDJCounts(){
                this.getProvinceDataInfo()
            }
        },
        mounted(){
            this.getProvinceDataInfo()
        },
        
    methods: {  
        getProvinceDataInfo(){
            var chartsCity  = [];
            var charList = [];
            charList[0] = [];
            charList[1] = [];
            charList[2] = [];
            charList[3] = [];
            charList[4] = [];
            var allCounts = [];
            for(var i=0;i<this.CityStationQXDJCounts.length;i++){
               chartsCity[i] = this.CityStationQXDJCounts[i].City;
            }
            for(var j=0;j<this.CityStationQXDJCounts.length;j++){
                var ss = [];
                for(i=0;i<this.CityStationQXDJCounts[j].StationDJCounts.length;i++){
                    ss.push(this.CityStationQXDJCounts[j].StationDJCounts[i].Count)
                    switch(this.CityStationQXDJCounts[j].StationDJCounts[i].DJ){
                        case '特别清新':{
                            charList[0][j]=this.CityStationQXDJCounts[j].StationDJCounts[i].Count;
                            break;
                        }
                        case '清新':{
                            charList[1][j]=this.CityStationQXDJCounts[j].StationDJCounts[i].Count;
                            break;
                        }
                        case '较清新':{
                            charList[2][j]=this.CityStationQXDJCounts[j].StationDJCounts[i].Count;
                            break;
                        }
                        case '一般':{
                            charList[3][j]=this.CityStationQXDJCounts[j].StationDJCounts[i].Count;
                            break;
                        }
                        case '不清新':{
                            charList[4][j]=this.CityStationQXDJCounts[j].StationDJCounts[i].Count;
                            break;
                        }
                    }
                }
                var sss = eval(ss.join("+"));
                allCounts.push(sss);
            }
            let bestCharts = echarts.init(document.getElementById('bestCharts'));
            var should = [] 
            let option1 = {
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: function(data) {
                        var _str = "";
                        _str += "特别清新： " + charList[0][data[0].dataIndex] + "个<br>";
                        _str += "清新：     " + charList[1][data[0].dataIndex] + " 个<br>";
                        _str += "较清新： "   + charList[2][data[0].dataIndex]+ "个<br>";
                        // _str += "较清新： " + (_actual[data[0].dataIndex] * 100 / _should[data[0].dataIndex]).toFixed(2) + " %";
                        _str += "一般： "    + charList[3][data[0].dataIndex]+ "个<br>";
                        _str += "不清新： "  + charList[4][data[0].dataIndex] + "个<br>";
                        return _str;
                    }
                },
                color:[this.$comjs.color5 , this.$comjs.color4, this.$comjs.color3, this.$comjs.color2,this.$comjs.color1],
                legend: {
                    data: [ '不清新','一般','较清新','清新','特别清新'],
                    textStyle :{
                        color: '#fff'
                    },
                    top: 10,
                    itemWidth: 24,
                    itemHeight: 16,
                    itemGap: 6,
                },
                    grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis:  {
                    type: 'category',
                    data: chartsCity,
                    axisLine: { //坐标轴轴线相关设置。数学上的x轴
                        show: true,
                        lineStyle: {
                            color: '#fff',                               
                        },
                    },
                    axisLabel: { //坐标轴刻度标签的相关设置
                        textStyle: {
                            fontSize : 12,
                            color: '#fff',
                            //margin:81,                               
                        },
                        interval:0,
                        rotate:0 //字体旋转
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#fff',
                        }
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: { //坐标轴刻度标签的相关设置
                        textStyle: {
                            color: '#fff',
                            //margin:15,                               
                        },
                    },
                    axisLine: { //坐标轴轴线相关设置。数学上的x轴
                        show: true,
                        lineStyle: {
                            color: '#fff',                               
                        },
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#fff',
                        }
                    },
                },
                series: [
                     {
                        name: '不清新',
                        type: 'bar',
                        stack: '总量',                          
                        data: charList[4].map(function(item,index){
                            var s =  eval(charList[4].join("+"));
                            if(s==0){
                                s=10;
                            }
                            return parseInt(item/allCounts[index] * 100)
                        }),
                        // [20, 32, 31, 34, 30, 33, 20, 34, 30, 33, 20]
                    },
                    {
                        name: '一般',
                        type: 'bar',
                        stack: '总量',                            
                        data: charList[3].map(function(item,index){
                            var s =  eval(charList[3].join("+"));
                            if(s==0){
                                s=10;
                            }
                            return parseInt(item/allCounts[index] * 100)
                        }),
                        // [20, 32, 31, 34, 30, 33, 20, 34, 30, 33, 20]
                    },
                    {
                        name: '较清新',
                        type: 'bar',
                        stack: '总量',      
                        data: charList[2].map(function(item,index){
                            var s =  eval(charList[2].join("+"));
                            if(s==0){
                                s=10;
                            }
                            return parseInt(item/allCounts[index] * 100)
                        }),
                        // [20, 32, 31, 34, 30, 33, 20, 34, 30, 33, 20]
                    },
                    {
                        name: '清新',
                        type: 'bar',
                        stack: '总量',                          
                        data: charList[1].map(function(item,index){
                            var s =  eval(charList[1].join("+"));
                            if(s==0){
                                s=10;
                            }
                            return parseInt(item/allCounts[index] * 100)
                        }), 
                        // [20, 32, 31, 34, 30, 33, 20, 34, 30, 33, 20]
                    },
                    {
                        name: '特别清新',
                        type: 'bar',
                        stack: '总量',                          
                        // data: charList[0],
                        data: charList[0].map(function(item,index){
                            var s =  eval(charList[0].join("+"));
                            if(s==0){
                                s=10;
                            }
                            return parseInt(item/allCounts[index] * 100)
                        }),
                        // [0, 32, 31, 34, 30, 33, 20, 34, 30, 33, 20]
                    }
                    
                    
                    
                   
                ]
            };
            if(document.documentElement.clientWidth <= 1594){
                option1.legend.itemWidth = 12;
                option1.legend.itemHeight = 8;
                option1.legend.itemGap=2;

                option1.xAxis.axisLabel.textStyle.fontSize = 9;
                option1.xAxis.axisLabel.rotate = -40;
                
            }else{
                option1.legend.itemWidth = 24;
                option1.legend.itemHeight = 16;
                option1.legend.itemGap=6;

                option1.xAxis.axisLabel.textStyle.fontSize = 12;
                option1.xAxis.axisLabel.rotate = 0;
            }
            bestCharts.setOption(option1);
            window.addEventListener("resize", function () {
                if(document.documentElement.clientWidth <= 1594){
                    option1.legend.itemWidth = 12;
                    option1.legend.itemHeight = 8;
                    option1.legend.itemGap=2;

                    option1.xAxis.axisLabel.textStyle.fontSize = 9;
                    option1.xAxis.axisLabel.rotate = -40;
                }else{
                    option1.legend.itemWidth = 24;
                    option1.legend.itemHeight = 16;
                    option1.legend.itemGap=6;

                    option1.xAxis.axisLabel.textStyle.fontSize = 12;
                    option1.xAxis.axisLabel.rotate = 0;
                }
                bestCharts.setOption(option1);
                bestCharts.resize();
            });           
         }
        } 
        
    }
</script>

<style lang="stylus" scoped>
    /* 样式穿透 .leftContentTwo >>> .littleLine */
    /* 所有样式 */
    .leftContentThree
        width: 4.03rem
        height: 32.1vh
        color: white
        background :rgba(7,23,42,0.49)
        .assessDetail
            .bestCityTitle
                width: 100%
                height: 5vh
                padding-top: 1.8vh
                .doubleLine
                    width: .11rem
                    height: 1.9vh
                    .wide
                        width: .07rem
                        height: 1.9vh
                        background : #41E6FD
                    .narrow
                        width: .02rem
                        height: 1.9vh
                        background : #41E6FD
                        margin-left: .02rem
                .bestCityName
                    font-size: .18rem
                    font-family: FZZXHJW--GB1-0
                    margin-left: .12rem
            .threeLine
                width: 100%
                height: .03rem
                .firstLine
                    width: 3.4rem
                    height: .03rem
                    background : #41E6FD
                .secondLine
                    width: .08rem
                    height: .03rem
                    background: #333
                    margin-left: .06rem
                    margin-right: .04rem
                .thirdLine
                    width: .44rem
                    height: .03rem
                    background: #FFFFFF
            .bestCharts
                #bestCharts
                    width: 21vw
                    height: 27vh        
</style>


